<script>
/**
 * Sales Analytics component
 */
export default {
  data() {
    return {
      series: [42, 26, 15],
      chartOptions: {
        chart: {
          height: 230,
          type: "donut"
        },
        labels: ["有效信源", "失效信源", "抓取异常"],
        plotOptions: {
          pie: {
            donut: {
              size: "75%"
            }
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          show: false
        },
        colors: ["#5664d2", "#1cbb8c", "#eeb902"]
      },
      sel: '全部类型'
    };
  },
  methods: {
    handleCommand(value){
      this.sel = value
    }
  }
};
</script>

<template>
  <div class="card">
    <div class="card-body">
      <div class="float-right">
        <!-- <select class="custom-select custom-select-sm">
          <option selected>全部类型</option>
          <option value="1">Mar</option>
          <option value="2">Feb</option>
          <option value="3">Jan</option>
        </select> -->
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{sel}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="有效信源">有效信源</el-dropdown-item>
            <el-dropdown-item command="失效信源">失效信源</el-dropdown-item>
            <el-dropdown-item command="抓取异常">抓取异常</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <h4 class="card-title mb-4" style="font-size: 17px;">48小时信源状态分布</h4>

      <div id="donut-chart" class="apex-charts"></div>
      <apexchart
        class="apex-charts"
        height="230"
        dir="ltr"
        :series="series"
        :options="chartOptions"
      ></apexchart>
      <div class="row">
        <div class="col-4">
          <div class="text-center mt-4">
            <p class="mb-2 text-truncate">
              <i class="mdi mdi-circle text-primary font-size-10 mr-1"></i> 有效信源
            </p>
            <h5>42 %</h5>
          </div>
        </div>
        <div class="col-4">
          <div class="text-center mt-4">
            <p class="mb-2 text-truncate">
              <i class="mdi mdi-circle text-success font-size-10 mr-1"></i> 失效信源
            </p>
            <h5>26 %</h5>
          </div>
        </div>
        <div class="col-4">
          <div class="text-center mt-4">
            <p class="mb-2 text-truncate">
              <i class="mdi mdi-circle text-warning font-size-10 mr-1"></i> 抓取异常
            </p>
            <h5>42 %</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>